<script setup>
import {storeToRefs} from "pinia";
import { useRoute, useRouter } from "vue-router";
import { computed, ref } from "vue";
import {useShopStore}  from "@/stores/shop.js";
import ShopInfo from "@/components/shop/ShopInfo.vue";
import Product from "@/components/shop/Product.vue";
import CartButton from "@/components/cart/CartButton.vue";

const shopStore = useShopStore()
const router = useRouter()
const route = useRoute()

const id = route.query.id

const shopInfo = shopStore.nearbyList.find(item => item.id == id)
// console.log(shopInfo)

const categoryList = computed(()=>{
  let arr = []
  shopInfo.category.forEach(item =>{
    arr.push(item.name)
  })
  return ['全部商品',...arr]
})

const activeIndex = ref(0)

// 全部商品
const allProduct = computed(()=>{
  let arr =[]
  shopInfo.category.forEach(item =>{
    arr = [...arr,...item.list]
  })
  return arr
})

// 分类商品
const categoryProduct = ref(allProduct.value)

// 切换商品
const onChangeCategory = index =>{
  activeIndex.value = index
  if(index == 0){
    categoryProduct.value = allProduct.value
  }else {
    categoryProduct.value = shopInfo.category[index-1].list
  }
}

//
const toBack = ()=>{
  router.go(-1)
}
</script>

<template>
  <div class="shop">
    <!-- 搜索 -->
    <div class="search">
      <span class="iconfont search_back" @click="toBack">&#xe697;</span>
      <div class="search_content">
        <span class="iconfont search_content_icon">&#xe632;</span>
        <input type="text" class="search_content_input" placeholder="请输入商品名称">
      </div>
    </div>
    <!-- 商店信息 -->
    <div class="shop_info">
      <ShopInfo :item="shopInfo"/>
    </div>
    <!-- 内容 -->
    <div class="content">
      <div class="category">
        <div class="category_item"
             :class="{'category_item--active': activeIndex == index}"
             v-for="(ele, index) in categoryList" :key="index"
             @click="onChangeCategory(index)"
        >
          {{ ele }}
        </div>
<!--        <div class="category_item" >海鲜</div>-->
<!--        <div class="category_item" >水果</div>-->
      </div>
      <div class="product">
        <div v-for="(item,index) in categoryProduct" :key="index">
          <Product :shopName="shopInfo.name" :product="item">
            <div>
              月售 {{ item.sales }} 件
            </div>
          </Product>
        </div>
      </div>
    </div>
    <!-- 购物车底部 -->
    <CartButton :shopName="shopInfo.name" />
  </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.shop {
  //搜索
  .search {
    margin: .18rem;
    display: flex;
    align-items: center;

    &_back {
      font-size: .24rem;
      margin-right: .08rem;
      color: #b6b6b6;
    }
    &_content {
      flex: 1;
      height: .32rem;
      background-color: #f5f5f5;
      border-radius: .16rem;
      display: flex;
      align-items: center;

      &_icon {
        color: #b6b6b6;
        margin: 0 .12rem;
      }
      &_input {
        border: none;
        outline: none;
        background: none;
        width: 100%;
        height: .32rem;
      }
    }
  }
  //商店信息
  .shop_info {
    margin: 0 .18rem;
  }
  // 内容
  .content {
    position: absolute;
    left: 0;
    right: 0;
    top: 1.7rem;
    bottom: .5rem;
    display: flex;

    .category {
      overflow-y: scroll;
      width: .78rem;
      background-color: #f5f5f5;

      &_item {
        line-height: .4rem;
        font-size: .14rem;
        text-align: center;
        color: $content_fontcolor;

        &--active {
          background-color: $bgColor;
        }
      }
    }
    .product {
      flex: 1;
      overflow-y: scroll;
    }
  }
}
</style>